<template>
    <div>
        <div class="head">
            <el-input placeholder="角色名称" size="small" style="width: 150px;" v-model="searchInput.roleName"></el-input>
            <div class="box">
                <el-button type="primary" size="big" style="width: 70px;" @click="searchRole">查询</el-button>
                <el-button size="small" @click="clearSearch">清空</el-button>
            </div>
        </div>
        <div class="center">
            <el-button type="primary" size="big">添加</el-button>
            <!-- <el-button type="danger" size="small" style="width: 100px;">批量删除</el-button> -->
        </div>
        <el-table :data="roleList" border style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column label="角色名称" prop="roleName" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="{ row, $index }">
                    <el-button class="el-icon-info" type="info"
                        @click="$router.push(`/acl/role/roleAuth/${row.id}?roleName=${row.roleName}`)"></el-button>
                    <el-button class="el-icon-edit" type="primary"></el-button>
                    <el-button class="el-icon-delete" type="danger"></el-button>
                </template>

            </el-table-column>
        </el-table>
        <div>
            <el-pagination @size-change="handleSizeChange" @current-change="getRoleList" :current-page="page"
                :page-sizes="[3, 5, 7]" :page-size="100" layout=" prev, pager, next, jumper,->,sizes,total"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            page: 1,//当前页
            limit: 3,//一页展示几条数据 
            searchInput: {
                roleName: ''
            },//搜索input输入的内容
        }
    },
    mounted() {
        const { page, limit } = this
        this.$store.dispatch('getRoleList', { page, limit })
    },
    methods: {
        //    查询按钮 
        searchRole() {
            const { page, limit, searchInput } = this
            console.log(searchInput.roleName);
            // const searchObj = {...searchInput}
            this.$store.dispatch('getRoleList', { page, limit, searchInput })
        },
        // 点击清空
        clearSearch() {
            this.searchInput.roleName = ''
            const { page, limit } = this
            this.$store.dispatch('getRoleList', { page, limit })
        },
        // 点击分页器不同页数的回调
        getRoleList(page) {
            this.page = page
            // console.log(page);
            let limit = this.limit
            // console.log(this.page);
            this.$store.dispatch('getRoleList', { page, limit })
        },
        // 当修改每页数量的监听回调
        handleSizeChange(limit) {
            // pageSize就是选择的每页展示几条数据
            // console.log(limit); 
            // 更新limit/
            this.limit = limit
            let page = this.page
            // console.log(this.limit);
            // 重新获取第一页数据显示
            this.$store.dispatch('getRoleList', page, limit)
        },
    },
    computed: {
        ...mapState({
            roleList: (state) => state.role.roleList,
            total: (state) => state.role.total
        })
    }
}
</script>

<style scoped>
.head {
    width: 380px;
    display: flex;
    justify-content: space-between;
}

.head .box {
    width: 200px;
}

.center {
    width: 250px;
    margin: 20px 0;
}
</style>